const vscode = require("vscode");

let webviewPanel;

/**
 * @param {vscode.ViewColumn | { readonly viewColumn: vscode.ViewColumn; readonly preserveFocus?: boolean; }} viewColumn
 * @param {string} label
 */
function createWebView(viewColumn, label) {
  if (webviewPanel === undefined) {
    webviewPanel = vscode.window.createWebviewPanel(
      "webView",
      label,
      viewColumn,
      {
        retainContextWhenHidden: true,
        enableScripts: true,
      }
    );
    webviewPanel.webview.html = getIframeHtml();
  } else {
    webviewPanel.title = label;
    webviewPanel.reveal();
  }

  webviewPanel.onDidDispose(() => {
    webviewPanel = undefined;
  });

  return webviewPanel;
}

function getIframeHtml() {
  return `
    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            html,
            body {
                margin: 0 !important;
                padding: 0 !important;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .iframeDiv {
                width: 100%;
                height: 100%;
                overflow: hidden
            }
        </style>
        </head>

        <body>
          <iframe id='iframe1' class="iframeDiv" frameborder='0' src="http://localhost:8000"></iframe>
        </body>
    </html>
    `;
}

module.exports = {
  createWebView,
  getIframeHtml,
};
